import { useState } from "react";
import { Form, Checkbox, Slider } from 'antd';

type Props = {
    onConfig: (config: any) => void;
};

export default ({ onConfig }: Props) => {

    const [config, setConfig] = useState<any>({
        trackRecursion: false,
        timeLimit: 100,
    });

    const [form] = Form.useForm();

    return (
        <div>
            <Form
                layout={"horizontal"}
                form={form}
                initialValues={{
                    trackRecursion: false,
                    timeLimit: 100,
                }}
                onValuesChange={(values) => {
                    const merge = {...config, ...values};
                    setConfig(merge);
                    onConfig?.(merge);
                }}
            >
                <Form.Item
                    name="trackRecursion"
                    valuePropName="checked"
                    label={null}
                >
                    <Checkbox defaultChecked={true}>跟踪递归</Checkbox>
                </Form.Item>

                <Form.Item label="时间限制" name="timeLimit" valuePropName="value">
                    <Slider
                        min={10}
                        max={100}
                        step={10}
                        marks={{ 10: '10', 50: '50', 100: '100' }}
                    />
                </Form.Item>
            </Form>
        </div>
    );
}
